
<style  scoped lang="scss">
.mop{

     margin-left: 20px;
      .top{
         width: 100%;
          li{
                
             margin-top: 10px;
            img{
                 width: 40px;
                 height: 40px;
                 border-radius: 20px;
            }

            div{
                 margin-top: 10px;
            }

          }
        }

     .firstef{
             position: fixed;
              bottom: 0px;
          input{
             width: 300px;
             height: 30px;
             margin-bottom: 10px;
          };
          button{
              margin-left: 10px;
              border:  none;
              background-color: whitesmoke;
          }
     }       
}


</style>


<template > <!-- vue实例外创建 -->
    <div class="mop">
           <div  v-for="(item,index) in historylist" :key="index" class="top">
                
            <li class="mushf">
                 <div>
                   <img :src="userInfo.avatar" alt="">

                   <span>  {{userInfo.nickname}}</span>
                    <div class="moke">

                    </div>
                 </div>
                 <div>
                    {{item}}
                 </div>
            </li>
           
          </div>

        <div class="firstef">
             <input type="text" v-model="huyxt">
             <button @click="mushut">发送评论</button>
        </div>
    </div>
</template>

<script  setup lang="ts">
    
    import  localStorePlugin  from '@/stores/plugins/index'
    import {ref} from 'vue';

    const   historylist = ref(JSON.parse(localStorage.getItem('historylist')) || [])
    const huyxt=ref('')
   
const mushut = () => {
     if(huyxt.value==''){
         return;
     }
     else{
      console.log(historylist.value)
      historylist.value.unshift(huyxt.value)
      localStorage.setItem('historylist', JSON.stringify(historylist.value))
      huyxt.value=''
     }
}

const userInfo = ref(JSON.parse(localStorage.getItem('userInfo')));


</script>




